<script setup>
import { ref } from 'vue'

const dreamTypes = {
  peaceful: { icon: '🌟', color: 'var(--dream-peaceful)', label: '平静梦境' },
  mysterious: { icon: '🌌', color: 'var(--dream-mysterious)', label: '神秘梦境' },
  nightmare: { icon: '👻', color: 'var(--dream-nightmare)', label: '噩梦' },
  lucid: { icon: '🦋', color: 'var(--dream-lucid)', label: '清醒梦' }
}

const dreamEntries = ref([
  {
    id: 1,
    date: '2024-03-20',
    title: '飞翔的梦',
    content: '我梦见自己在云端翱翔，俯瞰整个城市，感觉无比自由...',
    type: 'lucid',
    mood: 85,
    symbols: ['飞翔', '云朵', '城市'],
    tags: ['自由', '冒险'],
    interpretation: '这个梦暗示着你渴望突破现实的束缚，追求更大的自由。'
  },
  {
    id: 2,
    date: '2024-03-19',
    title: '神秘森林',
    content: '漫步在一片发光的森林中，树木会说话，指引我找到一个古老的宝藏...',
    type: 'mysterious',
    mood: 75,
    symbols: ['森林', '光芒', '宝藏'],
    tags: ['探索', '奇遇'],
    interpretation: '这个梦象征着你内心深处的智慧和潜在机遇。'
  }
])

const showNewEntry = ref(false)
const newDream = ref({
  type: 'peaceful',
  title: '',
  content: '',
  mood: 50,
  tags: []
})

const toggleNewEntry = () => {
  showNewEntry.value = !showNewEntry.value
}

const addDream = () => {
  // 这里添加新梦境记录的逻辑
  showNewEntry.value = false
}
</script>

<template>
  <div class="dream-journal">
    <!-- 顶部操作栏 -->
    <div class="journal-header">
      <h1 class="section-title">梦境日记</h1>
      <button class="dream-btn" @click="toggleNewEntry">
        <span>✨</span>
        记录新梦境
      </button>
    </div>

    <!-- 新建梦境记录表单 -->
    <div v-if="showNewEntry" class="new-entry-form dream-card">
      <div class="dream-type-selector">
        <button 
          v-for="(type, key) in dreamTypes"
          :key="key"
          :class="['dream-btn', 'type-btn', newDream.type === key ? 'active' : '']"
          :style="{ '--type-color': type.color }"
          @click="newDream.type = key"
        >
          <span class="type-icon">{{ type.icon }}</span>
          {{ type.label }}
        </button>
      </div>

      <div class="form-group">
        <input 
          v-model="newDream.title"
          type="text"
          class="dream-input"
          placeholder="给这个梦境起个标题..."
        >
      </div>

      <div class="form-group">
        <textarea 
          v-model="newDream.content"
          class="dream-input"
          rows="6"
          placeholder="描述你的梦境内容..."
        ></textarea>
      </div>

      <div class="mood-slider">
        <label>梦境情绪</label>
        <div class="slider-container">
          <input 
            v-model="newDream.mood"
            type="range"
            min="0"
            max="100"
            class="dream-range"
          >
          <div class="mood-indicator">{{ newDream.mood }}%</div>
        </div>
      </div>

      <div class="form-actions">
        <button class="dream-btn submit-btn" @click="addDream">
          <span>💫</span>
          保存并解析
        </button>
        <button class="dream-btn cancel-btn" @click="showNewEntry = false">
          取消
        </button>
      </div>
    </div>

    <!-- 梦境列表 -->
    <div class="dreams-grid">
      <div 
        v-for="dream in dreamEntries"
        :key="dream.id"
        class="dream-card entry-card"
      >
        <div class="entry-header">
          <div 
            class="dream-type-badge"
            :style="{ background: dreamTypes[dream.type].color }"
          >
            <span class="type-icon">{{ dreamTypes[dream.type].icon }}</span>
            <span>{{ dreamTypes[dream.type].label }}</span>
          </div>
          <div class="entry-date">{{ dream.date }}</div>
        </div>

        <h3 class="entry-title">{{ dream.title }}</h3>
        <p class="entry-content">{{ dream.content }}</p>

        <div class="entry-symbols">
          <div 
            v-for="(symbol, index) in dream.symbols"
            :key="index"
            class="symbol-item"
          >
            {{ symbol }}
          </div>
        </div>

        <div class="entry-tags">
          <span 
            v-for="(tag, index) in dream.tags"
            :key="index"
            class="dream-tag"
          >
            {{ tag }}
          </span>
        </div>

        <div class="interpretation-box">
          <div class="interpretation-header">
            <span class="interpretation-icon">🔮</span>
            解析
          </div>
          <p class="interpretation-content">{{ dream.interpretation }}</p>
        </div>

        <div class="entry-actions">
          <button class="dream-btn action-btn">
            <span>📝</span>
            编辑
          </button>
          <button class="dream-btn action-btn">
            <span>🔍</span>
            深度解析
          </button>
          <button class="dream-btn action-btn">
            <span>🎨</span>
            生成图像
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dream-journal {
  padding: 1rem;
}

.journal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.new-entry-form {
  margin-bottom: 2rem;
  animation: slideIn 0.3s ease-out;
}

.dream-type-selector {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.type-btn {
  flex: 1;
  justify-content: center;
  min-width: 120px;
  background: var(--type-color);
}

.type-btn.active {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.type-icon {
  font-size: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.mood-slider {
  margin-bottom: 1.5rem;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dream-range {
  flex: 1;
  height: 8px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.dream-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(107, 75, 255, 0.5);
}

.form-actions {
  display: flex;
  gap: 1rem;
}

.submit-btn {
  flex: 2;
}

.cancel-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
}

.dreams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.entry-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dream-type-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.entry-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.entry-title {
  font-size: 1.3rem;
  color: var(--text-primary);
}

.entry-content {
  color: var(--text-secondary);
  line-height: 1.6;
}

.entry-symbols {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.symbol-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.entry-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.interpretation-box {
  background: rgba(107, 75, 255, 0.1);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(107, 75, 255, 0.2);
}

.interpretation-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.interpretation-content {
  color: var(--text-secondary);
  line-height: 1.5;
}

.entry-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  flex: 1;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
}

.action-btn:hover {
  background: rgba(107, 75, 255, 0.2);
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
</style> 